<template>
	<view>
		<u-navbar :is-back="false" title="账户">
			<view class="u-flex u-row-right" style="width: 100%; padding-right: 20rpx;">
				<view class="u-flex u-row-center" @click="click">
					<u-icon name="plus" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="summary">
			<view class="summary__bg">
				<image src="/static/images/account_bg.png" mode="aspectFill"></image>
			</view>
			<view class="summary__content">
				<view>净资产</view>
				<view class="net-assets-box">
					<view class="net-assets-box__number">
						<text>{{isShow?this.$api.money(account.accountSummary.netAssets):"***.**"}}</text>
					</view>
					<view class="net-assets-box__eye">
						<u-icon :name="isShow?'eye':'eye-off'" size="48" @click="show"></u-icon>
					</view>
				</view>
				<view class="total-assets-box">
					<view class="total-assets-box__assets">
						<text>总资产</text>
						<text class="u-p-l-10">{{isShow?this.$api.money(account.accountSummary.assets):"***.**"}}</text>
					</view>
					<view>
						<text>总负责</text>
						<text
							class="u-p-l-10">{{isShow?this.$api.money(account.accountSummary.liabilities):"***.**"}}</text>
					</view>
				</view>
			</view>
		</view>

		<u-collapse :item-style="itemStyle" :head-style="headStyle" v-for="(item,index) in account.accountList"
			:key="item.groupIndex">
			<u-collapse-item :open="true" @change="change" :index="item.groupIndex">
				<view class="b-list-header" slot="title">
					<view class="b-list-header__title">
						<text>{{item.groupName}}</text>
						<text class="font-color-grey">({{item.accountData.length}})</text>
					</view>
					<view class="font-color-grey">
						<text>{{$api.money(item.summaryAssets)}}</text>
					</view>
				</view>


				<u-cell-item v-for="(a,i) in item.accountData" :key="a.uuid" :title="a.name"
					:value="$api.money(a.balanceMoney)" :arrow="false" :title-style="titleStyle"
					:value-style="valueStyle" :border-top="true" :border-bottom="false">
					<template v-slot:icon>
						<u-image width="80rpx" height="80rpx" :src="a.iconUrl">
						</u-image>
					</template>
					<view slot="label" v-if="a.creditInfo">
						<view v-if="a.creditInfo.creditStatus">已出账 | {{a.creditInfo.creditDays}}天后还款</view>
						<view v-else>未出账 | {{a.creditInfo.creditDays}}天后出账</view>
					</view>
				</u-cell-item>

			</u-collapse-item>

		</u-collapse>


		<view class="account-add-box" @click="click">
			<view class="account-add-box__icon">
				<u-icon name="plus" size="48"></u-icon>
			</view>
			<view>添加账户</view>
		</view>

		<view class="account-hide-box">已隐藏账户</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				titleStyle: {
					fontSize: 32 + 'rpx',
					color: "#000"
				},
				valueStyle: {
					fontSize: 32 + 'rpx',
					color: '#000'
				},
				itemStyle: {
					display: 'flex',
					flexDirection: 'column',
					margin: '20rpx',
					backgroundColor: '#FFF',
					borderRadius: 10 + 'px'
				},
				headStyle: {
					margin: '0 0',
				},
				account: {}
			}
		},
		methods: {
			click() {
				uni.navigateTo({
					url: "choice_account"
				})
			},
			change(index, show) {
				console.log(index, show);
			},
			show() {
				this.isShow = !this.isShow;
			}
		},
		onLoad() {
			this.account = this.$api.getAccountList();
			console.log(this.account);

		}
	}
</script>

<style lang="scss">
	.summary {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 300rpx;
		padding: 40rpx;
		color: $uni-text-color-inverse;
		position: relative;

		.summary__bg {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			left: 0;

			image {
				width: 100%;
				height: 100%;
			}

		}

		.summary__content {
			z-index: 99;

			.net-assets-box {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 20rpx 0;

				.net-assets-box__number {
					flex: 1;
					font-size: 58rpx;
				}

			}

			.total-assets-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.total-assets-box__assets {
					flex: 1;
				}
			}
		}
	}

	.my_account {
		margin: 20rpx;
		color: $uni-text-color-grey;
	}

	.u-cell {
		padding-left: 10rpx;
	}



	.b-list-header {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0 10rpx 0 30rpx;
		justify-content: space-between;

	}

	.b-list-header {
		color: #AFB2B9;
	}
	.font-color-grey {
		color: #AFB2B9;
	}

	.account-add-box {
		display: flex;
		justify-content: center;
		margin: 50rpx 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10px;
		font-size: 36rpx;
		color: $uni-color-error;

		.account-add-box__icon {
			margin-right: 10rpx;
		}
	}

	.account-hide-box {
		margin: 50rpx;
		display: flex;
		justify-content: center;
		color: $u-type-primary-dark;

	}
</style>
